<link rel="stylesheet" type="text/css" href="__STATIC__/ext/layui/extend/cascader/cascader.css"/>
<style>
  .goods-category-container {display: inline-block;position: relative;z-index: 10}
</style>
<div class="goods-category-container">
  <input type="text" autocomplete="off" show="false" class="layui-input select-category" placeholder="选择商品分类" readonly />
  <input type="hidden" name="category_id">
</div>
<script>
var form, layCascader, goodsCategory = [];
$(function() {
  layui.extend({
    layCascader: '__STATIC__/ext/layui/extend/cascader/cascader'
  });
  layui.use(['form', 'layCascader'], function () {
    form = layui.form;
    layCascader = layui.layCascader;
    form.render();
    fetchCategory($('.goods-category-container .select-category'), function (value, node) {
      $('[name="category_id"]').val(value);
    })
  });
});

/**
 * 渲染分类选择
 * @param elem
 * @param callback
 */
function fetchCategory(elem, callback){
  if (!goodsCategory.length) {
    $.ajax({
      url : ns.url("shop/goodscategory/lists"),
      dataType: 'JSON',
      type: 'POST',
      async: false,
      success: function(res) {
        goodsCategory = res.data;
      }
    })
  }
  var _cascader = layCascader({
    elem: $('.select-category'),
    options: goodsCategory,
    props: {
      value: 'category_id',
      label: 'category_name',
      children: 'child_list'
    }
  });
  _cascader.changeEvent(function (value, node) {
    typeof callback == 'function' && callback(value, node)
  });
}
</script>